<template>
    <div>
        <div class="label" @click="toggle">
            <span>{{ treeData.label }}</span>
            <span v-if="isExpandable">
                <span>{{ isOpen ? "[-]" : "[+]" }}</span>
            </span>
        </div>

        <ul v-show="isOpen">
            <tree-control
                v-for="item in treeData.children"
                :key="item.label"
                :treeData="item"
            ></tree-control>
        </ul>
    </div>
</template>

<script>
export default {
    // 递归调用必须项
    name: "TreeControl",
    props: {
        treeData: {
            type: Object,
            default: {},
            required: true,
        },
    },
    data() {
        return {
            isOpen: false,
        };
    },
    methods: {
        toggle() {
            this.isOpen = !this.isOpen;
        },
    },
    computed: {
        isExpandable() {
            return this.treeData.children && this.treeData.children.length;
        },
    },
};
</script>

<style scoped lang='less'>
.label {
    cursor: pointer;
}
</style>